<!doctype html>
<html xmlns:display="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>XPHoot - Master</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" data-th-href="${portal.assetUrl({'_path=css/xphoot-master.css'})}" href="../../../assets/css/xphoot-master.css"
          type="text/css"/>
</head>
<body class="masterview">

<div id="selectPanel">
    <div id="selectPanelLogo">
        <img data-th-src="${portal.assetUrl({'_path=img/logo.png'})}"/>
    </div>
    <div id="selectGame">
        <div>
            <select name="games" id="games">
                <option selected="selected">&nbsp;Select a game to start</option>
            </select>
        </div>
    </div>

</div>

<div id="joinPanel" style="display: none;">
    <div id="joinPin">
        <div id="joinPinUrl">Join at <span data-th-text="${joinUrl}">&lt; xpHoot URL&gt;</span></div>
        <div id="joinPinPin">Game PIN: <span id="pin">12345</span></div>
    </div>
    <div id="joinPlayers">
        <div id="joinStartContainer">
            <div id="joinStart">Waiting for Players<span class="one">.</span><span class="two">.</span><span class="three">.</span>​</div>
        </div>

        <div id="joinPlayersHeader" style="display: none;">
            <span id="joinPlayersTitle">Waiting for players</span>
        </div>

        <ul id="players"></ul>
    </div>
</div>

<div id="questionPanel" style="display: none;">
    <div id="progressbar"></div>

    <div id="questionHeader">
        <span id="questionText"></span>
        <img id="questionImage" data-th-src="${portal.assetUrl({'_path=img/empty.png'})}" style="display:none;"/>
        <div class="pieContainer" style="display: none;">
            <div class="pieID pie">
            </div>
            <ul class="pieID legend">
            </ul>
        </div>

        <div id="questionBottom">
            <div class="answerCount" style="display: none;">
                <span>0</span>
            </div>
        </div>

        <audio id="questionAudio"></audio>
        <audio id="gameAudio" loop="loop"></audio>
    </div>
    <div class="answer-grid-wrapper">
        <div id="answer-grid" class="answer-grid-4">
            <div id="answerRed" class="answerRed"><img class="answerImage" data-th-src="${portal.assetUrl({'_path=img/circle.png'})}"/>
                <span class="answerText"></span>
            </div>
            <div id="answerBlue" class="answerBlue"><img class="answerImage" data-th-src="${portal.assetUrl({'_path=img/square.png'})}"/>
                <span class="answerText"></span>
            </div>
            <div id="answerGreen" class="answerGreen"><img class="answerImage"
                                                           data-th-src="${portal.assetUrl({'_path=img/triangle.png'})}"/>
                <span class="answerText"></span>
            </div>
            <div id="answerYellow" class="answerYellow"><img class="answerImage" data-th-src="${portal.assetUrl({'_path=img/cross.png'})}"/>
                <span class="answerText"></span>
            </div>
        </div>
    </div>
</div>

<div id="scoresPanel" style="display: none;">
    <div id="scoresHeader">
        <span class="scoresHeaderText">Scoreboard</span>
    </div>
    <div id="scoresPlayers">
        <ul></ul>
    </div>
</div>

<script data-th-src="${portal.serviceUrl({'_service=init', 'r=master'})}" src="#"></script>
<script data-th-src="${portal.assetUrl({'_path=js/jquery-3.4.1.min.js'})}" src="../../../assets/js/jquery-3.4.1.min.js"></script>
<script data-th-src="${portal.assetUrl({'_path=js/progressbar.min.js'})}" src="../../../assets/js/progressbar.min.js"></script>
<script data-th-src="${portal.assetUrl({'_path=js/xphoot-master.js'})}" src="../../../assets/js/xphoot-master.js"></script>
</body>
</html>
